<template>
  <div class="Register">
    <el-form
      class="register-form"
      :model="registerForm"
      :rules="rules"
      ref="registerFormRef"
      label-position="left"
      label-width="0px"
      v-loading="registerLoading"
    >
      <h3 class="register-title">用户注册</h3>
      <el-form-item prop="username">
        <el-input
          type="text"
          v-model="registerForm.username"
          auto-complete="off"
          placeholder="用户名，必填"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="registerForm.password"
          auto-complete="off"
          placeholder="密码，必填"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="text"
          v-model="registerForm.name"
          auto-complete="off"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="text"
          v-model="registerForm.phone"
          auto-complete="off"
          placeholder="电话号码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="text"
          v-model="registerForm.email"
          auto-complete="off"
          placeholder="E-Mail"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 40%; background: #505458; border: none"
          @click="register"
        >注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
      checked: true,
      registerForm: {
        username: "",
        password: "",
        name: "",
        phone: "",
        email: "",
      },
      registerLoading: false,
    };
  },
  methods: {
    async register() {
      this.$refs.registerFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请认真填写注册信息");
        const { data: res } = await this.$http.post("/register", {
          username: this.registerForm.username,
          password: this.registerForm.password,
          name: this.registerForm.name,
          phone: this.registerForm.phone,
          email: this.registerForm.email,
        });
        this.registerLoading = true;

        if (res.code !== 200) {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.registerLoading = false;
              this.$refs.registerFormRef.resetFields();
            },
          });
        }
        if (res.code === 200) {
          this.registerLoading = false;
          this.$router.push("/login");
        }
      });
    },
  },
};
</script>
<style>
.Register {
  height: 100%;
  width: 100%;
  background: url("~assets/img/bg.jpg") no-repeat;
  background-position: center;
  background-size: cover;
  position: fixed;
}
.register-form {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.register-title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
